<template>
  <div class="title_div">
    <!-- 两端对齐 -->
    <van-row type="flex" justify="space-between" class="van_row">
      <van-col span="18" class="search_div">
        <van-icon name="search" class="search_icon" size=".5rem" />
        <span>请输入商品名称</span>
      </van-col>
      <van-col span="3">
        <van-button class="loginBtn" type="primary" size="mini">
          取消
        </van-button>
      </van-col>
    </van-row>

    <div class="sidebarGoods">
      <van-sidebar v-model="activeKey" @change="onChangeSideBar">
        <van-sidebar-item
          v-for="(n, inx) in sidebar_arr"
          :key="inx"
          :title="n.txt"
        />
      </van-sidebar>
    </div>

    <div class="sidebarClass">
      <div
        class="goodsItem"
        v-for="(n, inx) in goodsListObj"
        :key="inx"
        @click="getGoodsDetail(n)"
      >
        <img :src="n.goods_img" alt="" />
        <p>{{ n.goods_name }}</p>
        <b>{{ n.goods_price }}</b>
      </div>
    </div>
    <footer_bar></footer_bar>
  </div>
</template>
<script>
import footer_bar from "./footer_bar.vue";
import axios from "axios";

export default {
  name: "cateList",
  data() {
    return {
      activeKey: 0,
      sidebar_arr: [
        {
          txt: "推荐专区",
        },
        {
          txt: "爆品专区",
        },
        {
          txt: "新品专区",
        },
        {
          txt: "居家生活",
        },
        {
          txt: "服饰鞋包",
        },
        {
          txt: "美食酒水",
        },
        {
          txt: "个护清洁",
        },
        {
          txt: "母婴亲子",
        },
        {
          txt: "运动旅行",
        },
        {
          txt: "数码家电",
        },
        {
          txt: "严选全球",
        },
      ],
      goodsListObj: null,
    };
  },
  components: { footer_bar },
  created() {
    axios.get("http://localhost:8888/cate_goods_list_0").then((_d) => {
      this.goodsListObj = _d.data;
    });
  },
  methods: {
    onChangeSideBar(inx) {
      axios.get("http://localhost:8888/cate_goods_list_" + inx).then((_d) => {
        this.goodsListObj = _d.data;
      });
    },
    getGoodsDetail(n) {
      this.$router.push({
        name: "goods_detail",
        params: { goodsObj: n },
      });
    },
  },
};
</script>
<style scoped>
.title_div {
  padding: 0.23rem 0 0.23rem 0;
  position: relative;
  /* padding-left: 2.16rem; */
}
.search_div {
  font-size: 0.4rem;
  height: 0.75rem;
  background-color: #ededed;
  color: #666;
  border-radius: 0.11rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.search_icon {
  margin: 0 0.2rem 0 0;
}
.van_row {
  padding: 0 0.2rem;
}
.loginBtn {
  width: 0.98667rem;
  height: 0.53333rem;
  font-size: 0.32rem;
  line-height: 0.53333rem;
  text-align: center;
  color: #dd1a21;
  border: 1px solid #dd1a21;
  border-radius: 0.10667rem;
  background: #fff;
  margin: 0.1rem 0 0 0;
}
.sidebarClass {
  position: fixed;
  left: 1.5rem;
  top: 1.3rem;
}

.goodsItem {
  float: left;
  width: 44%;
  margin: 0rem 0.2rem 0.44rem 0.2rem;
  font-size: 0.37333rem;
  overflow: hidden;
}

.goodsItem img {
  height: 4.6rem;
}
</style>